<!--
 * @Author: zhao 13370229059@163.com
 * @Date: 2024-11-11 09:46:07
 * @LastEditors: zhao 13370229059@163.com
 * @LastEditTime: 2024-12-18 22:07:37
 * @FilePath: \dance\pages\index\index3.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="index">
    <uv-status-bar bgColor="#fff"></uv-status-bar>
    <index3Navbar />
    <index3Head :mainHeight="mainHeight" ref="headRef" @onSubmit="headChange" />
    <view class="main">
      <inde3Main :top="top" ref="index3Main" @goHome="goHome" />
    </view>
  </view>
</template>

<script setup>
  import { reactive, ref, nextTick, getCurrentInstance } from 'vue';
  import index3Navbar from './index3Compontents/navbar.vue';
  import index3Head from './index3Compontents/head.vue';
  import inde3Main from './index3Compontents/main.vue';
  import { onLoad, onReady } from '@dcloudio/uni-app';
  const instance = getCurrentInstance();
  const query = uni.createSelectorQuery().in(instance.proxy);
  let mainHeight = ref(0),
    top = ref(0);
  onReady(() => {
    nextTick(async () => {
      query
        .select('.main')
        .boundingClientRect(data => {
          mainHeight.value = data.height === 0 ? uni.$uv.sys().screenHeight - data.top : data.height;
          top.value = data.top;
        })
        .exec();
    });
  });
  let index3Main = ref();
  const headChange = val => {
    index3Main.value.sonChange(val);
  };
  let headRef = ref();
  let goHome = () => {
    headRef.value.goHome();
  };
</script>

<style lang="scss" scoped>
  .index {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }
  .main {
    flex: 1;
    overflow: hidden;
  }
</style>
